<template>
  <div>
    <!-- <div class="detail-nav mb25"> -->
      <div v-if="type=='product'">
        <!-- <span class="co cur">产品中心</span> <span class="co"> / </span><span class="cur">产品详情</span> -->
        <gl-breadcrumb class="mb15"
                       text="产品中心,产品详情"></gl-breadcrumb>

      </div>
      <div v-else>
        <gl-breadcrumb class="mb15"
                       text="客户管理,客户详情,产品详情"></gl-breadcrumb>
        <!-- 
        <span class="co cur">客户管理</span> <span class="co"> / </span>
        <span class="co cur">客户详情</span> <span class="co"> / </span> <span class="cur">产品详情</span> -->
      </div>
    <!-- </div> -->
    <div class="detail-main p20">
      <div class="main-nav mb20">{{info.pname}}</div>
      <div class="info">
        <div class="info-head mb25">
          <span class="info-tit pl15">基本信息</span>
          <el-button size="mini"
                     icon="el-icon-edit"
                     @click="toEdit">编辑</el-button>
        </div>
        <div class="info-box">
          <div class="itembox">
            <div class="item">
              <div class="flex"> <span class="label"> 授权方式：</span><span class="value"> {{info.auth_name}}</span> </div>
              <div class="flex2"> <span class="label"> 渠道标签：</span> <span class="value">{{info.channel}}</span> </div>
            </div>
            <div class="item">
              <div class="flex"> <span class="label"> 激活方式：</span><span class="value">{{info.aw_name}}</span> </div>
              <div class="flex2"> <span class="label"> 第三方集成：</span> <span class="value">{{info.tpa_name||'暂无第三方集成'}}</span> </div>
            </div>
            <div class="item">
              <div class="flex"> <span class="label"> 使用期限：</span><span class="value">{{info.endtime}}</span> </div>
              <div class="flex2"> <span class="label"> 产品描述：</span> <span class="value"
                      v-html="info.remark"></span> </div>
            </div>
          </div>
        </div>
      </div>
      <div class="models mt25">
        <div class="info-head mb25">
          <span class="info-tit pl15">适配机型</span>
          <el-button size="mini"
                     icon="el-icon-setting"
                     @click="toSetting">设置</el-button>
        </div>

        <div class="device-list flex jcb fww mt20 pl20 pr20">
          <div class="device-item flex jcb bsb mb20"
               v-for="(device, i) in form.model_list"
               :key="i">
            <img :src="device.model_icon"
                 alt=""
                 class="mr25 device-img">
            <div class="text flex-1">
              <div class="dev-name mb10">{{device.model_name}}</div>
              <div class="dev-other flex jcb"
                   v-for="(label, k) in device.model_data"
                   :key="k">
                <span class="wsnw">{{label.key_name}}</span>
                <span class="wsnw">{{label.value}}</span>
              </div>
            </div>
          </div>
          <div v-if="form.model_list&&!form.model_list.length"
               class="device-item flex jcb bsb mb20">暂无适配机型，请先设置</div>
        </div>
        <decive v-if="showDecive"
                :add='false'
                title='适配机型'
                :deviceList="deviceList"
                :chooseList="chooseList"
                @dialogClose="dialogClose"
                @success="successChoose"
                :customer_id="customer_id"
                :product_id="product_id"
                :innerDialogTit="innerDialogTit">
        </decive>
      </div>
      <div class="apps mt25">
        <div class="info-head mb25">
          <span class="info-tit pl15">关联应用</span>
          <el-button size="mini"
                     @click="toAddApp">添加应用</el-button>
        </div>
        <div class="device-list flex jcb fww mt20 pl20 pr20">
          <div class="device-item flex bsb mb20"
               v-for="(device, i) in form.model_app_list"
               :key="i">
            <img :src="device.icon"
                 alt=""
                 class="mr25 device-img">
            <div class="dev-other">{{device.name}}</div>
          </div>
          <div v-if="form.model_app_list&&!form.model_app_list.length"
               class="device-item flex  bsb mb20">暂无关联，请先设置</div>
        </div>
      </div>

      <div class="aiSkills mt25">
        <div class="info-head mb25">
          <span class="info-tit pl15">设备AI技能</span>
          <el-button size="mini"
                     @click="toAddSkill('2')">技能管理</el-button>
        </div>
        <div class="skillBox">
          <div class="skillItem"
               v-for="(decive,i) in deviceSkillList"
               :key='i'>
            <div class="item">
              <div class="tit">{{decive.skill_id+'-'+decive.skill_name}}</div>
              <div class="desc wot1 w100"
                   v-html="decive.description"></div>
            </div>
          </div>
          <div v-if="deviceSkillList&&!deviceSkillList.length"
               class="device-item flex jcb bsb mb20">暂无适配机型，请先设置</div>
        </div>
      </div>

      <div class="aiSkills mt25">
        <div class="info-head mb25">
          <span class="info-tit pl15">家长监控技能</span>
          <el-button size="mini"
                     @click="toAddSkill('1')">技能管理</el-button>
        </div>
        <div class="skillBox">
          <div class="skillItem"
               v-for="(decive,i) in parentSkillList"
               :key='i'>
            <div class="item">
              <div class="tit">{{decive.skill_id+'-'+decive.skill_name}}</div>
              <div class="desc wot1 w100"
                   v-html="decive.description"></div>
            </div>
          </div>
          <div v-if="parentSkillList&&!parentSkillList.length"
               class="device-item flex jcb bsb mb20">暂无适配机型，请先设置</div>
        </div>
      </div>

    </div>
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVis"
               :before-close="handleClose"
               @close="close">
      <gl-form :form="form"
               :formLabel="formLabel"
               ref="glForm"
               :must="must">
        <template>
          <div slot="integrated"
               class="intBox">
            <div v-for="(item,index) in integratedList"
                 :key="index"
                 class="itemBox"
                 @mouseover="item.show = true"
                 @mouseout="item.show = false">
              <span class="name">{{item.tpa_name}}</span>
              <i class="el-icon-close"
                 :class="item.show?'show':'del'"
                 @click="delItem(item.tpa_id,'int')"></i>
            </div>
            <div class="add"
                 @click="addIntegrated">
              <span class="addico"> + </span>
              <span class="addbox"> 添加 </span>
            </div>
          </div>
        </template>
        <template>
          <div slot='tag'
               class="tagBox">
            <div v-for="(item,index) in tagList"
                 :key="index"
                 class="itemBox"
                 @mouseover="item.show = true"
                 @mouseout="item.show = false">
              <span class="name">{{item.channel_name}}</span>
              <i class="el-icon-close"
                 :class="item.show?'show':'del'"
                 @click="delItem(item.channel_id,'tag')"></i>

            </div>
            <div class="add"
                 @click="addChannel">
              <span class="addico"> + </span>
              <span class="addbox">添加</span>
            </div>
          </div>
        </template>
      </gl-form>
      <el-dialog :title="innerTitle"
                 :visible.sync="innerVis"
                 append-to-body>
        <div v-if="Thired"
             class="addThired clearfix">
          <div class="ThiredLi"
               v-for="(item,index) in thiredList"
               :key="index">
            <el-checkbox v-model="item.checked"
                         :label="item.tpa_name"
                         border
                         size="medium"></el-checkbox>
          </div>
        </div>

        <div v-else
             class="addChannel clearfix">
          <div class="ChannelLi"
               v-for="(item,index) in ChannelList"
               :key="index">
            <el-checkbox v-model="item.checked"
                         :label="item.channel_name"
                         border
                         size="medium"></el-checkbox>
          </div>
        </div>

        <div slot="footer"
             class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary"
                     @click="submit">确定</el-button>
        </div>
      </el-dialog>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"
                   @click="edit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title"
               :visible.sync="appDialog"
               width="58%"
               @close="appCancel">
      <div>
        <div v-if="isApp"
             class="appdialog-head">
          <gl-select :options="typeList"
                     placeholder='请选择类型'
                     clearable></gl-select>
          <el-input class="input ml20"
                    placeholder="请输入搜索内容"
                    v-model="keyword">
            <i slot="suffix"
               class="search"
               @click="getAppList()">搜索</i>
          </el-input>
        </div>
        <div v-else
             class="appdialog-head">
          <el-input class="input"
                    placeholder="请输入搜索内容"
                    v-model="keyword">
            <i slot="suffix"
               class="search"
               @click="getSkillList()">搜索</i>
          </el-input>

        </div>
        <div class="appdialog-main mt20">
          <gl-table :data="isApp?data[0]:data[1]"
                    :columns="isApp?columns[0]:columns[1]">
            <template slot="bind"
                      slot-scope="{row}">
              <div class="bind"
                   @click="toBind(row)">
                <span v-if="row.is_band||row.is_bind">已关联</span>
                <span v-else>关联</span>
              </div>
            </template>
          </gl-table>
          <GlPagination :total="total"
                        :size="limits"
                        :curr="curr"
                        @callback="callback"></GlPagination>
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="appCancel">取 消</el-button>
        <el-button type="primary"
                   @click="addDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: 'produceDetail',
  data() {
    return {
      appDialog: false,
      title: '',
      keyword: '',
      typeList: [{ name: '家长端', id: 1 }, { name: '设备端', id: 2 }],
      info: {},
      //   tempInfo: {},
      dialogTitle: '',
      dialogVis: false,
      innerTitle: '',
      innerVis: false,
      Thired: false,
      type: '',
      product_id: '',
      form: {
        pname: '',
        customer_id: '',
        auth_id: '',
        aw_id: '',
        endtime: '',
        tpa_id: '',
        channel_list: [],
        tpa_list: [],
        remark: '',
        tpa_name: ''
      },
      formLabel: [
        { label: '产品名称：', prop: 'pname', placeholder: '请输入' },
        {
          label: '授权方式：',
          prop: 'auth_id',
          placeholder: '请输入',
          options: []
        },
        {
          label: '激活方式：',
          prop: 'aw_id',
          placeholder: '请输入',
          options: []
        },
        { label: '使用期限：', prop: 'endtime', placeholder: '请输入' },
        { label: '第三方集成：', prop: 'tpa_id', slot: 'integrated' },
        { label: '渠道标签：', prop: 'channel_list', slot: 'tag' },
        {
          label: '产品描述：',
          prop: 'remark',
          type: 'textarea',
          text: 'ueditor',
          placeholder: '请输入'
        }
      ],
      must: 'pname,auth_id,aw_id,endtime',
      integratedList: [],
      tagList: [],
      thiredList: [],
      ChannelList: [],
      customer_id: '',
      showDecive: false,
      deviceList: [],
      chooseList: [],
      data: [
        [
          {
            id: '',
            icon: '',
            name: '',
            apk_type_name: '',
            is_band: ''
          }
        ],
        [
          {
            skill_id: '',
            skill_name: '',
            sg_name: '',
            type_msg: '',
            is_bind: ''
          }
        ]
      ],
      columns: [
        [
          { label: '应用编号', prop: 'id' },
          { label: 'ICON', prop: 'icon', type: 'image'},
          { label: '应用名称', prop: 'name' },
          { label: '应用类型', prop: 'apk_type_name' },
          { label: '操作', prop: 'is_band', slot: 'bind' }
        ],
        [
          { label: '技能ID', prop: 'skill_id' },
          { label: '技能名称', prop: 'skill_name' },
          { label: '技能类型', prop: 'sg_name' },
          { label: '应用类型', prop: 'type_msg' },
          { label: '操作', prop: 'is_bind', slot: 'bind' }
        ]
      ],
      curr: 1,
      limits: 10,
      total: 0,
      bindArr: [],
      appBindArr: [],
      SkillBindArr: [],
      deviceSkillList: [],
      parentSkillList: [],
      skillType: '',
      skillKeyword: '',
      isApp: null
    }
  },
  created() {
    this.type = this.$route.query.type
    this.product_id = this.$route.query.id
    // console.log(this.product_id)
    this.getInfo(this.product_id)
    this.getAuths()
    this.getAW()
    this.getThired()
    this.getChannelList()
  },
  watch: {
    innerVis(val) {
      if (!val) {
        if (this.innerTitle == '第三方添加') {
          this.thiredList.map(e => {
            e.checked = false
          })
        } else {
          this.ChannelList.map(e => {
            e.checked = false
          })
        }
      }
    },
    appDialog(val) {
      if (!val) {
        this.keyword = ''
      }
    }
  },
  methods: {
    close() {
      this.dialogVis = false
      this.form = Object.assign({}, this.info)
    },
    callback(obj) {
      this.isApp ? this.getAppList(obj) : this.getSkillList(obj)
    },

    getSkillList(obj) {
      //   console.log(obj)
      if (obj) {
        this.curr = obj.curr
        this.limits = obj.size
      } else {
        this.curr = 1
        this.limits = 10
      }
      this.http
        .$post('admin/skill.api/list_skill', {
          //   product_id: this.product_id,
          bind_product_id: this.product_id,
          curr: this.curr,
          limits: this.limits,
          type: this.skillType,
          keyword: this.skillKeyword
        })
        .then(r => {
          //   return;
          r.list.map(e => {
            if (e.is_bind && !this.bindArr.includes(e.skill_id)) {
              this.bindArr.push(e.skill_id * 1)
            } else if (!e.is_bind && this.bindArr.includes(e.skill_id)) {
              e.is_bind = true
            }
          })
          this.total = r.total
          this.data[1].splice(0, this.data[1].length, ...r.list)
        })
        .catch(this.$err)
    },
    appCancel() {
      this.bindArr = []
      this.appDialog = false
    },
    addDialogSubmit() {
      let url = ''
      let params = {}

      if (this.isApp) {
        url = 'admin/product.api/pro_update_app'
        params = Object.assign(
          { product_id: this.product_id },
          { app_ids: this.bindArr.join(',') }
        )
      } else {
        url = 'admin/skill.api/pro_update_skill'
        params = Object.assign(
          { product_id: this.product_id },
          { skill_ids: this.bindArr.join(',') }
        )
      }
      //   console.log(params)
      //   return
      this.http.$post(url, params).then(r => {
        this.bindArr = []
        this.SkillBindArr = []
        this.appBindArr = []
        this.getInfo(this.product_id)
        this.appDialog = false
      })
    },
    toBind(row) {
      if (this.isApp) {
        row.is_band = !row.is_band
      } else {
        row.is_bind = !row.is_bind
      }
      if (
        !this.bindArr.includes(this.isApp ? row.id : row.skill_id) && this.isApp
          ? row.is_band
          : row.is_bind
      ) {
        this.bindArr.push(this.isApp ? row.id : row.skill_id * 1)
      } else {
        this.bindArr.splice(
          this.bindArr.indexOf(this.isApp ? row.id : row.skill_id),
          1
        )
      }
    },
    // bindApp() {
    //   this.http.$post('admin/product.api/pro_update_app', {
    //     product_id: this.product_id,
    //     app_ids: this.bindArr
    //   })
    // },
    dialogClose() {
      this.showDecive = false
    },
    getAppList(obj) {
      //   console.log(obj)
      if (obj) {
        this.curr = obj.curr
        this.limits = obj.size
      } else {
        this.curr = 1
        this.limits = 10
      }
      this.http
        .$post('admin/app.api/get_list', {
          //   customer_id: this.customer_id,
          //   product_id: this.product_id,
          bind_product_id: this.product_id,
          apk_type: this.apk_type,
          keyword: this.keyword,
          curr: this.curr,
          limits: this.limits
        })
        .then(r => {
          //   return;
          r.list.map(e => {
            if (e.is_band && !this.bindArr.includes(e.id)) {
              this.bindArr.push(e.id * 1)
            } else if (!e.is_band && this.bindArr.includes(e.id)) {
              e.is_band = true
            }
          })
          this.total = r.total
          this.data[0].splice(0, this.data[0].length, ...r.list)

          //   this.data = r.list
        })
        .catch(this.$err)
    },
    toSetting() {
      this.innerDialogTit = '关联终端机型'
      this.showDecive = true
      this.getdecive()
    },
    toEdit() {
      this.dialogTitle = '修改产品信息'
      this.dialogVis = true
        // console.log(this.form);
        // console.log(this.integratedList);
        // this.form.channel_id = this.
        let temp = []
        this.tagList.map(e=>{
            temp.push(e.channel_id)
        })
        this.form.channel_id = temp.join(',')
        // console.log(this.form.channel_id);
        // console.log(this.tagList);
      this.$refs.glForm && this.$refs.glForm.clearValidate()
    },
    toAddApp() {
      this.isApp = true
      this.title = '关联应用'
      //   console.log('toAddApp')
      this.appDialog = true
      this.bindArr = [...this.appBindArr]
      this.getAppList()
    },
    toAddSkill(type) {
      this.title = '关联技能'
      this.isApp = false
      this.appDialog = true
      this.skillType = type
      this.bindArr = [...this.SkillBindArr]
      this.getSkillList()
      //   if (type == '1') {
      //     console.log('设备端')
      //   } else {
      //     console.log('家长端')
      //   }
    },
    edit() {
        // console.log(this.form.tpa_id);
        // return;
      if (this.$refs.glForm.validate()) {
        let params = {
          product_id: this.product_id,
          name: this.form.pname,
          remark: this.form.remark,
          customer_id: this.form.customer_id,
          auth_id: this.form.auth_id,
          app_id: this.form.id,
          status: this.form.status,
          tpa_id: this.form.tpa_id,
          aw_id: this.form.aw_id,
          channel_id: this.form.channel_id
        }
        this.http
          .$post('admin/product.api/edit', params)
          .then(r => {
            this.dialogVis = false
            this.integratedList = []
            this.tagList = []
            this.$message.success('修改成功')
            this.getInfo(this.product_id)
          })
          .catch(this.$err)
        //   console.log(this.form)
      } else {
        return this.$message.error('请确认输入是否完整无误')
      }
    },
    successChoose() {
      // flag&&this.getInfo(this.product_id)
      this.getInfo(this.product_id)
      // console.log(flag);
    },
    cancel() {
      this.innerVis = false
    },
    submit() {
      if (this.innerTitle == '第三方添加') {
        this.integratedList = this.thiredList.filter(item => {
          return item.checked == true
        })
        let temp = []
        this.integratedList.map(e => {
          temp.push(e.tpa_id)
        })
        this.form.tpa_id = temp.join(',')
        this.form.tpa_list = this.integratedList
      } else {
        this.tagList = this.ChannelList.filter(item => {
          return item.checked == true
        })
        let tmp = []
        this.tagList.map(e => {
          tmp.push(e.channel_id)
        })
        // console.log(tmp);
        this.form.channel_id = tmp.join(',')
        this.form.channel_list = this.tagList

        // this.thiredList.map(e=>(e.checked = false))

        // console.log(this.form.tpa_list)
        // console.log(this.form.channel_list)
      }
      this.innerVis = false
    },
    getThired() {
      this.http
        .$post('admin/thirdpa.api/all_lists')
        .then(r => {
          //   console.log(r)
          this.thiredList = r.map(e => ({ checked: false, show: false, ...e }))
        })
        .catch(this.$err)
    },
    getChannelList() {
      this.http
        .$post('admin/channel.Api/all_lists')
        .then(r => {
          //   console.log(r)
          this.ChannelList = r.map(e => ({ checked: false, show: false, ...e }))
        })
        .catch(this.$err)
    },
    getInfo(product_id) {
      this.http
        .$post('admin/product.api/get_info', { product_id })
        .then(r => {

            console.log(r);
          this.info = Object.assign({}, r)
          //   this.tempInfo = Object.assign({}, r)

          this.customer_id = r.customer_id

          this.form = r
          this.tagList = r.channel_list.map(e => ({ show: false, ...e }))
        //   console.log(this.tagList);

          r.model_list.map(e => {
            if (!this.chooseList.includes(e.model_id)) {
              this.chooseList.push({ model_id: e.model_id })
            }
          })

          r.model_app_list.map(e => {
            if (!this.appBindArr.includes(e.id)) {
              this.appBindArr.push(e.id * 1)
            }
          })
          //   console.log(this.appBindArr)
          let temp = []
          let tempArr = []
          r.skill_list.map(e => {
            if (!this.SkillBindArr.includes(e.skill_id)) {
              this.SkillBindArr.push(e.skill_id * 1)
            }
            if (e.type == '2') {
              temp.push(e)
            } else if (e.type == '1') {
              tempArr.push(e)
            }
          })
          this.deviceSkillList.splice(0, this.deviceSkillList.length, ...temp)
          this.parentSkillList.splice(
            0,
            this.parentSkillList.length,
            ...tempArr
          )
          //   console.log(this.deviceSkillList)
          //   console.log(this.parentSkillList)

          r.tpa_id.split(',').map(e => {
            this.thiredList.map(item => {
              if (item.tpa_id*1 == e * 1) {
                this.integratedList.push(item)
              }
            })
          })
        //   console.log(this.integratedList);
        })
        .catch(this.$err)
    },
    getdecive() {
      this.http
        .$post('admin/device.Api/device', {
          customer_id: this.customer_id,
          product_id: this.product_id,
          limits: 9999
        })
        .then(r => {
          this.deviceList = r.list.map(e => ({ show: false, ...e }))
        })
        .catch(this.$err)
    },
    getAuths() {
      this.http
        .$post('admin/auth.api/list_auths')
        .then(r => {
          //   console.log(r)
          if (r && r.length) {
            this.formLabel[1].options = r.map(e => ({
              label: e.auth_name,
              value: e.auth_id
            }))
          }
        })
        .catch(this.$err)
    },
    getAW() {
      this.http
        .$post('admin/Product.api/get_aw')
        .then(r => {
          //   console.log(r)
          if (r && r.length) {
            this.formLabel[2].options = r.map(e => ({
              label: e.name,
              value: e.id
            }))
          }
        })
        .catch(this.$err)
    },
    delItem(id, str) {
      //   console.log(id, str)
      id = id.toString()
      if (str == 'int') {
        let tempArr = this.form.tpa_id.split(',')
        if (tempArr.indexOf(id) != -1) {
          tempArr.splice(tempArr.indexOf(id), 1)
        }
        this.integratedList.map((e, i) => {
          if (e.tpa_id == id) {
            this.integratedList.splice(i, 1)
          }
        })
        this.form.tpa_id = tempArr.join(',')
      } else if (str == 'tag') {
        let temp = this.form.channel_id.split(',')
        if (temp.indexOf(id) != -1) {
          temp.splice(temp.indexOf(id), 1)
        }
        this.tagList.map((e, i) => {
          if (e.channel_id == id) {
            this.tagList.splice(i, 1)
          }
        })
        this.form.channel_id = temp.join(',')
      }
      // console.log(this.form);
    },
    addIntegrated() {
      this.innerTitle = '第三方添加'
      this.innerVis = true
      this.Thired = true
      this.integratedList.map(e => {
        this.thiredList.map(item => {
          if (item.tpa_id == e.tpa_id) {
            item.checked = true
          }
        })
      })
    },
    addChannel() {
      this.innerTitle = '渠道添加'
      this.innerVis = true
      this.Thired = false
      this.tagList.map(e => {
        this.ChannelList.map(item => {
          if (item.channel_id == e.channel_id) {
            item.checked = true
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.maxH{
    max-height: 50px;
}
.addThired,
.addChannel {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  .ThiredLi,
  .ChannelLi {
    min-width: 170px;
    margin-bottom: 5px;
  }
}
.intBox,
.tagBox {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  .itemBox {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 16px;
    margin-bottom: 10px;
    background-color: #eee;
    position: relative;
    .name {
      // display: inline-block;
      text-align: center;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 0 10px;
    }
    .del {
      display: none;
    }
    .show {
      display: inline-block;
      cursor: pointer;
    }
  }
  .add {
    height: 30px;
    line-height: 30px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 0 8px;
    cursor: pointer;
    .addico {
      margin-right: 4px;
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.device-item {
  padding: 20px 40px;
  width: 45%;
  align-items: center;
  border: 1px #ddd solid;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  .device-img {
    width: 42%;
    max-height: 200px;
    border-radius: 5px;
  }
  .dev-other {
    flex-wrap: wrap;
  }
  .dev-name {
    color: #333;
    font-size: 20px;
  }
}

.appdialog-head {
  // display: flex;
  // justify-content: space-around;
  .input {
    width: 50%;
    // margin-left: 25px;
  }
  .input {
    /deep/.el-input__suffix {
      right: 0;
    }
  }
  /deep/.search {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #fff;
    width: 50px;
    cursor: pointer;
    background-color: #409eff;
  }
}
.appdialog-main {
  /deep/.cell {
    img {
      width: 30%;
      height: 30%;
      display: block;
    }
  }
  .bind {
    cursor: pointer;
    color: #409eff;
  }
}

/deep/.el-dialog__header {
  border-bottom: 1px solid #ddd;
}
.detail-nav {
  padding: 20px;
  background-color: #fff;
  .co {
    color: #999;
  }
  .cur {
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
.detail-main {
  background: #fff;
  .main-nav {
    font-size: 20px;
  }
  .info-tit {
    display: inline-block;
    margin-right: 50px;
    line-height: 40px;
    padding-left: 10px;
    font-weight: bold;
    border-left: 4px solid #91d5ff;
  }
  .info-box {
    padding: 10px 20px;
    .itembox {
      //   height: 300px;
      border-radius: 6px;
      border: 1px solid #ccc;
      .item {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
        text-align: justify;
      }
      .flex {
        flex: 1;
      }
      .flex2 {
        flex: 2;
      }
      .flex,
      .flex2 {
        margin: 0 25px;
        display: flex;
        .label {
          //   flex: 1;
        }
        .value {
          flex: 1;
        }
      }
    }
  }
  .skillBox {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 20px;
    .skillItem {
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 5px 25px;
      margin-right: 20px;
      margin-bottom: 20px;
      font-size: 16px;
      .item {
        max-width: 200px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
      }
      .tit {
        flex: 1;
        margin-bottom: 10px;
      }
      .desc {
        flex: 1;
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>